import "./contents.css";
import Tabs from "../tabs/tabs";
import { Col, Row, Tag } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import axios from "axios";
const Contents = () => {
  const avatar = require("./avatar.png");
  const [personList, setPersonList] = useState([]);
  const [data, setData] = useState([]);
  useEffect(() => {
    const Fn = async () => {
      const res = await axios.get("http://localhost:1019/person-info");
      setPersonList(...res.data);
    };
    Fn();
  }, []);
  useEffect(() => {
    const Fn = async () => {
      const res = await axios.get("http://localhost:1019/tag-label");
      setData(res.data);
    };
    Fn();
  }, []);
  return (
    <div className="contents">
      <div className="top">
        <Row gutter={16}>
          <Col className="gutter-row" span={14}>
            <div className="col">
              <div className="left">
                <div className="pic">
                  <img src={avatar} alt="avatar" />
                  <p className="zcpz">资产配置类别</p>
                </div>
                <div className="text">
                  <p className="name">
                    {personList.name} {personList.card}
                  </p>
                  <div className="tag1">
                    <p>{personList.age}</p>
                    <p style={{ marginLeft: "8px" }}>进取型</p>
                    <p style={{ marginRight: "8px", marginLeft: "8px" }}>
                      三类客户
                    </p>
                    <p>已配置保险</p>
                  </div>
                  <p
                    style={{
                      fontSize: "14px",
                      fontFamily: "PingFangSC, PingFang SC",
                      fontWeight: "400",
                      color: "#666666",
                    }}
                  >
                    理财经理：{personList.post}
                  </p>
                  <div className="tag2">
                    <p>现金管理类</p>
                    <p style={{ marginRight: "8px", marginLeft: "8px" }}>
                      固定收益类
                    </p>
                    <p>股票权益类</p>
                  </div>
                </div>
              </div>
              <div className="right">
                <div className="top">
                  <div className="left1">
                    <div
                      style={{
                        marginRight: "5px",
                        width: "4px",
                        height: "16px",
                        background: "#1D70F5",
                      }}
                    ></div>
                    财富客群标签
                  </div>
                  <div className="right1">
                    <PlusOutlined style={{ marginRight: "3px" }} />
                    标签
                  </div>
                </div>
                <div className="someText">
                  <p
                    style={{
                      textAlign: "center",
                      fontSize: "12px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "500",
                      color: "#F09F1D",
                    }}
                  >
                    低频低额消费行为
                  </p>
                  <p
                    style={{
                      fontSize: "10px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "400",
                      color: "#CC3C29",
                      opacity: "0.3",
                    }}
                  >
                    客户标签
                  </p>
                  <p
                    style={{
                      textAlign: "center",
                      fontSize: "12px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "500",
                      color: "#F09F1D",
                      opacity: "0.5",
                    }}
                  >
                    持有货币基金
                    <span
                      style={{
                        paddingLeft: "80px",
                        fontSize: "10px",
                        fontFamily: "SourceHanSansCN, SourceHanSansCN",
                        fontWeight: "400",
                        color: "#CC3C29",
                        opacity: "0.3",
                      }}
                    >
                      客户标签
                    </span>
                  </p>
                  <p
                    style={{
                      textAlign: "center",
                      fontSize: "14px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "500",
                      color: "#3670f7",
                    }}
                  >
                    中高贡献度
                  </p>
                  <p
                    style={{
                      marginLeft: "40px",
                      fontSize: "10px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "400",
                      color: "#F09F1D",
                      opacity: "0.5",
                    }}
                  >
                    历史最高价值等级资质客户
                    <span
                      style={{
                        marginLeft: "100px",
                        fontSize: "10px",
                        fontFamily: "SourceHanSansCN, SourceHanSansCN",
                        fontWeight: "400",
                        color: "#CC3C29",
                        opacity: "0.3",
                      }}
                    >
                      客户标签
                    </span>
                  </p>
                  <p
                    style={{
                      textAlign: "center",
                      fontSize: "12px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "500",
                      color: "#3670f7",
                      opacity: "0.5",
                    }}
                  >
                    员级职称
                  </p>
                  <p
                    style={{
                      paddingLeft: "40px",
                      fontSize: "10px",
                      fontFamily: "SourceHanSansCN, SourceHanSansCN",
                      fontWeight: "400",
                      color: "#cc3c29",
                      opacity: "0.5",
                    }}
                  >
                    中低活跃度
                    <span
                      style={{
                        paddingLeft: "60px",
                        fontSize: "10px",
                        fontFamily: "SourceHanSansCN, SourceHanSansCN",
                        fontWeight: "400",
                        color: "#cc3c29",
                        opacity: "0.3",
                      }}
                    >
                      客户标签
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </Col>
          <Col className="gutter-row" span={10}>
            <div className="col">
              <div className="message">
                <div className="text1">
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    <div
                      style={{
                        marginRight: "5px",
                        width: "4px",
                        height: "16px",
                        background: "#1D70F5",
                      }}
                    ></div>
                    <p className="mesRise">消息提醒</p>
                  </div>
                  <a href="https://www.baaidu.com">更多</a>
                </div>
                <ul className="ul">
                  {data.map((item) => {
                    return (
                      <li key={item.id}>
                        <Tag color={item.id === "1" ? "red" : "blue"}>
                          {item.id === "1" ? "警示" : "提醒"}
                        </Tag>
                        {item.label}
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div className="center">
        <Tabs />
      </div>
    </div>
  );
};
export default Contents;
